//
//  ContactsView.swift
//  WechatApp
//
//  Created on 2024.
//

import SwiftUI

struct ContactsView: View {
    @State private var contacts = Contact.mockContacts
    
    var body: some View {
        NavigationView {
            ZStack {
                List {
                    // Top items
                    TopContactItem(icon: "person.badge.plus", title: "新的朋友", color: .orange)
                    TopContactItem(icon: "person.3", title: "群聊", color: .green)
                    TopContactItem(icon: "tag", title: "标签", color: .blue)
                    TopContactItem(icon: "building.2", title: "公众号", color: .blue)
                    
                    // Contacts grouped by index letter
                    ForEach(groupedContacts.keys.sorted(), id: \.self) { letter in
                        Section(header: Text(letter)) {
                            ForEach(groupedContacts[letter] ?? []) { contact in
                                NavigationLink(destination: ProfileView(name: contact.name, avatarUrl: contact.avatarUrl)) {
                                    ContactRow(contact: contact)
                                }
                            }
                        }
                    }
                }
                .listStyle(.plain)
                
                // Index bar
                VStack {
                    Spacer()
                    HStack {
                        Spacer()
                        IndexBar(letters: groupedContacts.keys.sorted())
                            .padding(.trailing, 8)
                    }
                }
            }
            .navigationTitle("通讯录")
            .navigationBarTitleDisplayMode(.inline)
            .toolbar {
                ToolbarItem(placement: .navigationBarTrailing) {
                    Button(action: {}) {
                        Image(systemName: "person.badge.plus")
                    }
                }
            }
        }
    }
    
    private var groupedContacts: [String: [Contact]] {
        Dictionary(grouping: contacts) { $0.indexLetter }
    }
}

struct TopContactItem: View {
    let icon: String
    let title: String
    let color: Color
    
    var body: some View {
        HStack(spacing: 12) {
            ZStack {
                color
                Image(systemName: icon)
                    .foregroundColor(.white)
            }
            .frame(width: 40, height: 40)
            .clipShape(RoundedRectangle(cornerRadius: 4))
            
            Text(title)
                .font(.system(size: 16))
        }
        .padding(.vertical, 8)
    }
}

struct ContactRow: View {
    let contact: Contact
    
    var body: some View {
        HStack(spacing: 12) {
            if let avatarUrl = contact.avatarUrl, let url = URL(string: avatarUrl) {
                AsyncImage(url: url) { image in
                    image
                        .resizable()
                        .aspectRatio(contentMode: .fill)
                } placeholder: {
                    InitialsAvatar(contact.name, size: 40)
                }
                .frame(width: 40, height: 40)
                .clipShape(RoundedRectangle(cornerRadius: 4))
            } else {
                InitialsAvatar(contact.name, size: 40)
            }
            
            Text(contact.name)
                .font(.system(size: 16))
        }
        .padding(.vertical, 4)
    }
}

struct IndexBar: View {
    let letters: [String]
    
    var body: some View {
        VStack(spacing: 2) {
            ForEach(letters, id: \.self) { letter in
                Text(letter)
                    .font(.system(size: 10))
                    .foregroundColor(.secondary)
            }
        }
        .frame(width: 20)
    }
}

#Preview {
    ContactsView()
}

